<template>
  <div>
    <div class="payprice">
      <div>现在支付 <span>{{paytitle}}</span></div>
      <span>￥{{money}}</span>
    </div>
    <div class="payinfo">
<!--      <checkbox-group class="checkbox-group" bindchange="checkboxChange">-->
        <nut-checkbox
          v-model="checkbox1">
          <div class="radioInfo">
            <img src="../../assets/images/wxpay.png" />
            <span>微信支付</span>
          </div>
        </nut-checkbox>
<!--        <checkbox class="checkbox" value="pay" checked="{{item.checked}}">-->
<!--          <div class="radioInfo">-->
<!--            <img src="../../assets/images/wxpay.png" />-->
<!--            <span>微信支付</span>-->
<!--          </div>-->
<!--        </checkbox >-->
<!--      </checkbox-group>-->
    </div>
    <div class="payinfo">
      <p>我同意购买守则，取消政策和退款政策，我也同意支付以下所示的总金额(含服务费)。</p>
    </div>
    <div class="paybtn">
      <button @click="topay">确认订单  · ￥{{money}}</button>
    </div>
  </div>
</template>

<script>
import { payceshu, payplus } from '@/api/pay'
export default {
  name: 'pay',
  data () {
    return {
      select: '',
      paydata: {}
    }
  },
  created () {
    console.log(JSON.parse(this.$route.params.data))
    this.select = this.$route.params.select
    this.paydata = JSON.parse(this.$route.params.data)
  },
  methods: {
    topay () {
      if (this.select == 1) {
        var pay = {
          money: this.paydata.money,
          payNum: this.paydata.payNum
        }
        payceshu(pay).then(res => {
          console.log(res)
        })
      } else if (this.select == 2) {
        var money = {
          money: this.paydata.money
        }
        payplus(money).then(res => {
          console.log(res)
        })
      }
    }
  }
}
</script>

<style scoped>
  .payprice{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 4%;
    color: #222;
    font-size: .36rem;
    font-weight: bold;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: .20rem;
  }
  .payprice span{
    display: block;
    text-align: left;
    font-size: .28rem;
    color: #666;
  }
  .radioInfo{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    line-height: .72rem;
  }
  .radioInfo img{
    width: .72rem;
    height: .72rem;
    margin-right: .20rem;
  }
  checkbox,.checkbox-group{
    width: 100%;
  }
  checkbox .wx-checkbox-input{
    position: absolute;
    right: .30rem;
  }
  checkbox::before{
    right: .45rem;
  }
  .nut-checkbox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .payinfo{
    padding:.50rem .30rem;
    text-align: left;
    font-size: .32rem;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
  }
  .payinfo p{
    line-height: .4rem;
  }
  .paybtn button{
    background-color: #FF4444;
    color: #fff;
    font-size: .36rem;
    margin:  0 auto;
    padding: .1rem .2rem;
  }
  .paybtn{
    text-align: center;
    margin-top: .8rem;
  }
</style>
